<template>
    <div :class="`${PREFIX}`">
        <div :class="`${PREFIX}-left`">
            <img src="../assets/img/99logo.png" alt="">
            下载99友婚 开启全新的婚恋交友旅程
        </div>
        <div :class="`${PREFIX}-right`">
            <span :class="`${PREFIX}-right-item`" @click="download(1)">苹果客户端下载</span>
            <span :class="`${PREFIX}-right-item`" @click="download(2)">安卓客户端下载</span>
        </div>
    </div>
</template>
<script setup>
const PREFIX = 'download'
const download = (val) => {
    if (val === 1) {
        alert('苹果')
    }
    if (val === 2) {
        alert('安卓')
    }
}
</script>
<style lang="less">
.download {
    width: 100%;
    height: 48px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #ffffff;
    // padding: 0 100px;
    margin: 0 auto;

    &-left {
        color: #666666;
        font-size: 28px;
        display: flex;
        align-items: center;

        &>img {
            width: 46px;
            height: 46px;
            margin-right: 16px;
        }
    }

    &-right {
        color: #ffffff;
        font-size: 18.76px;
        display: flex;

        &-item {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 254px;
            height: 46px;
            border-radius: 23px;

            &:nth-child(1) {
                background: #000000;
                margin-right: 70px;
            }

            &:nth-child(2) {
                background: #47C100;
            }
        }
    }

}
</style>